<template>
  <div class="SelectCitywrap">
     <div class="SelectCity">
        <div class="Citynav">
            <img style="margin-left:12px" @click="toindex" src="../../assets/images/fanhui.png" alt="">
            <div>选择城市</div>
            <div style="margin-right:12px;width:18px;height:19px;"></div>
        </div>
        <div class="searchwrap">
            <div class="search">
                <div>
                    <img src="../../assets/images/se.png"/>
                </div>
                <div>
                    <input type="text" @focus="Search('search','focus')" @input="bindinput" placeholder="请输入城市名称..." maxlength="20"/>
                </div>
                <div>搜索</div>
            </div>
        </div>

         <div class="location" >
            <div class="title">
                <span>定位城市</span>
                <span @click="refresh">重新定位</span>
            </div>
            <div class="con">
                <div @click="locationcity" id="container">{{city}}</div>
            </div>
        </div>

       <div class="hot">
            <div class="hot_title">热门城市</div>
            <div class="hot_con">
                <div v-for="(item,index) in hot" :key="index"  @click="bindHotCity(item.name,item.region_lv3_id)">{{item.name}}</div>
            </div>
        </div>

        <div class="citylist" >
            <van-index-bar :index-list="indexlist" sticky :sticky-offset-top="110" class="citylistIndex_bar">
                <div v-for="(item,index) in cityList" :key="index">
                    <van-index-anchor style="background:#eee;height: 30px;line-height:30px;" :index="item.letter">{{item.letter}}</van-index-anchor>
                    <div class="citylistbox" v-for="(name,index) in item.city" :key="index" @click="bindCity(name.name,name.region_lv3_id)">{{name.name}}</div>
                </div>
            </van-index-bar>
        </div>
    </div>

    <div class="searchlist" v-if="search">
        <div class="box" @click="searchcity(item.name,item.region_lv3_id)" v-for="(item,index) in namelist" :key="index">{{item.name}}</div>
    </div> 

  </div>
</template>

<script>
// import BMap from 'bmap'
export default {
    data:() => ({
        cityList: [],
        city:"定位中...",
        region_lv3_id:"",
        hot:[],
        indexlist:[],
        search:false,
        namelist:[],
        clientHeight:'',
        code:''
    }),
    created() {
        this.getListAllForCity();
        this.clientHeight = document.documentElement.clientHeight
        console.log(this.clientHeight)
        this.location()
        console.log(this.$route.params.code)
        this.code = this.$route.params.code
    },
    mounted(){
    },
    methods:{
        location(){    //定义获取城市方法
            let geolocation = new BMap.Geolocation();
            console.log(geolocation)
            let that = this
            geolocation.getCurrentPosition(function getinfo(position){
                that.city = position.address.city;
                console.log(that.city)
            }, function(e) {
                that.city = "定位失败"
            }, {provider: 'baidu'});  
        },

        toindex() {
            this.$router.push({ 
                name:'index',
                query: {
                    code: this.code
                }
            });
        },
        // 监听输入框聚焦
        Search(name,type){
            console.log(name,type)
            this.search = true
            console.log(this.search)
        },
        // 监听输入框输入 搜索
        bindinput(e){
            console.log(e.target.value)
            let cityList = this.cityList
            console.log(cityList)
            let namelist = []
            for(let i = 0; i < cityList.length; i++){
                for(let j = 0; j< cityList[i].city.length; j++){
                    let name = cityList[i].city[j].name
                    if(name.indexOf(e.target.value)!=-1){
                        namelist.push(cityList[i].city[j])
                    }
                }
            }
            console.log(namelist)
            if(e.target.value){
                this.namelist = namelist,
                this.search = true
            }else{
                this.namelist = '',
                this.search = false
            }
        },
        // 重新定位
        refresh(){
            this.city = '定位中...'
            setTimeout(v=>{
                this.location()
            },300)
        },
        // 点击定位城市
        locationcity(){
            let cityList = this.cityList
            console.log(cityList)
            let newcity=[]
            for(let i = 0; i < cityList.length; i++){
                for(let j = 0; j< cityList[i].city.length; j++){
                    let name = cityList[i].city[j].name
                    if(name.indexOf(this.city)!=-1){
                        newcity.push(cityList[i].city[j])
                    }
                }
            }
            console.log(newcity)
            let data = {
                city:newcity[0].name,
                region_lv3_id:newcity[0].region_lv3_id
            }
            localStorage.setItem('city',JSON.stringify(data))
            this.$router.push({
                name:'index',
                query: {
                    code: this.code
                }
            });
           
        },
        // 城市列表接口
        getListAllForCity(){
            this.$http.getListAllForCity().then(res=>{
                console.log(res)
                let indexlist=[]
                res.data.list.forEach(item=>{  
                    indexlist.push(item.letter)
                    item.city.forEach(hot=>{
                        if(hot.is_hot == 1){
                            this.hot = [hot]
                        }
                    })
                })
                console.log(indexlist)
                console.log(this.hot,'hot')
                    this.cityList = res.data.list,
                    this.indexlist = indexlist
                console.log(this.cityList,'cityList')
            })
        },
        //选择热门城市
        bindHotCity(city,region_lv3_id) {
            let data = {
                city:city,
                region_lv3_id:region_lv3_id
            }
            localStorage.setItem('city',JSON.stringify(data))
            this.$router.push({
                name:'index',
                query: {
                    code: this.code
                }
            });
        },
        // 点击搜索列表选择城市
        searchcity(city,region_lv3_id){
            let data = {
                city:city,
                region_lv3_id:region_lv3_id
            }
            localStorage.setItem('city',JSON.stringify(data))
            this.$router.push({
                name:'index',
                query: {
                    code: this.code
                }
            });
        },
        //选择城市
        bindCity(city,region_lv3_id) {
            let data = {
                city:city,
                region_lv3_id:region_lv3_id
            }
            localStorage.setItem('city',JSON.stringify(data))
            this.$router.push({
                name:'index',
                query: {
                    code: this.code
                }
            });
        },
    }
}
</script>

<style>
    @import "index";
</style>
